<template>
	<view>
		<view class="user_info">
			<view class="user_icon">
				<image :src="imgDetail.user.avatar" mode="widthFix"></image>
			</view>
			<view class="user_desc">
				<view class="user_name">{{imgDetail.user.name}}</view>
				<view class="user_time">{{imgDetail.cnTime}}</view>
			</view>
		</view>
		<view class="high_img">
			<swipeeraction @swiperaction="handleSwiper">
				<image :src="imgDetail.thumb" mode="widthFix"></image>
			</swipeeraction>
		</view>

		<view class="user_rank">
			<view class="rank">
				<text class="iconfont icondianzan">{{imgDetail.rank}}</text>
			</view>
			<view class="user_collect">
				<text class="iconfont iconshoucang">收藏</text>
			</view>
		</view>

		<view class="album_warp" v-if="album.length">
			<view class="album_title">标题</view>

			<view class="album_list">
				<view class="album_item" v-for="item in album" :key="item.id">
					<view class="album_cover">
						<image :src="item.cover" mode="aspectFill"></image>
					</view>
					<view class="album_info">
						<view class="album_info_text">
							专辑
						</view>
						<view class="album_name">
							{{item.name}}
						</view>
						<text class="iconfont iconiconfontjiantou4"></text>
					</view>
				</view>
			</view>
		</view>

		<view class="comment_hot" v-if="hot.length">
			<view class="comment_title">
				<text class="iconfont iconhot1"></text>
				<text class="comment_text">最热评论</text>
			</view>


			<view class="recommend_list">
				<view class="comment_item" v-for="item in hot" :key="item.id">

					<view class="comment_user">
						<view class="user_icon">
							<image :src="item.user.avatar" mode="widthFix"></image>
						</view>
						<view class="user_name">
							<view class="user_nickname">
								{{item.user.name}}
							</view>
							<view class="user_time">
								{{item.cnTime}}
							</view>
						</view>
						<view class="user_badge">
							<!-- <image :src="item1.icon" mode="" :key="item.icon" v-for="item1 in item.user.title">
							</image> -->
							<image :src="item.user.title[0].icon">
							</image>
						</view>
					</view>

					<view class="comment_desc">
						<view class="comment_content">
							{{item.content}}
						</view>
						<view class="comment_like">
							<text class="iconfont icondianzan">{{item.size}}</text>
						</view>
					</view>

				</view>
			</view>
		</view>


		<view class="comment_new" v-if="comment.length">
			<view class="comment_title">
				<text class="iconfont iconpinglun"></text>
				<text class="comment_text">最新评论</text>
			</view>


			<view class="recommend_list">
				<view class="comment_item" v-for="item in comment" :key="item.id">

					<view class="comment_user">
						<view class="user_icon">
							<image :src="item.user.avatar" mode="widthFix"></image>
						</view>
						<view class="user_name">
							<view class="user_nickname">
								{{item.user.name}}
							</view>
							<view class="user_time">
								{{item.cnTime}}
							</view>
						</view>
						<view class="user_badge">
							<image :src="item1.icon" mode="" :key="item.icon" v-for="item1 in item.user.title">
							</image>
							<!-- <image :src="item.user.title[0].icon"> -->
							</image>
						</view>
					</view>

					<view class="comment_desc">
						<view class="comment_content">
							{{item.content}}
						</view>
						<view class="comment_like">
							<text class="iconfont iconpinglun">{{item.size}}</text>
						</view>
					</view>

				</view>
			</view>
		</view>

		<view class="download">
			<view class="download_btn" @click="handleDown1">下载图片</view>
		</view>
	</view>
</template>

<script>
	import swipeeraction from '@/components/swiperAction.vue'
	// moment.locale  将时间格式化成中文
	import moment from 'moment';
	moment.locale('zh-cn');
	export default {
		components: {
			swipeeraction
		},
		onLoad() {
			const {
				imgIndex
			} = getApp().globalData;
			this.imgIndex = imgIndex;
			this.getData()
		},
		data() {
			return {
				imgDetail: {},
				// 专辑数据
				album: [],
				// 最新评论
				comment: [],
				// 热门评论
				hot: [],
				// 图片索引
				imgIndex: 0
			};
		},
		methods: {
			getData(){
				const {imgList} = getApp().globalData;
				this.imgDetail = imgList[this.imgIndex];
				// this.imgIndex = imgIndex;
				// this.imgDetail.newThumb = this.imgDetail.thumb + this.imgDetail.rule.replace('$<Height>', 360);
				this.imgDetail.cnTime = moment(this.imgDetail.atime * 1000).fromNow();
				this.getComments(this.imgDetail.id);
			},
			getComments(id) {
				
				this.request({
						url: `http://157.122.54.189:9088/image/v2/wallpaper/wallpaper/${id}/comment`
					})
					.then(result => {
						this.album = result.res.album;

						result.res.hot.forEach(v => v.cnTime = moment(v.atime * 1000).fromNow());
						result.res.comment.forEach(v => v.cnTime = moment(v.atime * 1000).fromNow());

						this.comment = result.res.comment;
						this.hot = result.res.hot;
					})
			},
			handleSwiper(e){
				const {imgList} = getApp().globalData;
				if(e.direction === 'left' && this.imgIndex < imgList.length - 1){
					this.imgIndex ++ ;
					this.getData();
				} else if (e.direction === 'right' && this.imgIndex > 0) {
					this.imgIndex --;
					this.getData();
				} else {
					uni.showToast({
						title:'没有数据',
						icon:'none'
					})
				}
			},
			async handleDown1(){
				await uni.showLoading({
					title:'加载中'
				})
				
				
				const result1 = await uni.downloadFile({
					url:this.imgDetail.img
				})
				
				
				const result2 = await uni.saveImageToPhotosAlbum({
					filePath: result1[1].tempFilePath
				})
				
				uni.hideLoading()
				await uni.showToast({
					title:'下载完成'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user_info {
		display: flex;
		padding: 20rpx;

		.user_icon {
			padding: 0 20rpx;

			image {
				width: 88rpx;
				border-radius: 50%;
			}
		}

		.user_desc {
			.user_name {
				color: #000;
				font-weight: 600;
			}

			.user_time {
				color: #ccc;
				font-size: 24rpx;
				padding: 10rpx 0;
			}
		}
	}

	.user_rank {
		display: flex;
		height: 80rpx;
		border-bottom: 5rpx solid #eee;

		.rank {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.user_collect {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}

	.album_warp {
		padding: 20rpx;

		.album_title {
			padding: 10rpx 0;
		}

		.album_list {
			.album_item {
				display: flex;
				padding: 10rpx 0;
				border-bottom: 1rpx solid #eee;

				.album_cover {
					flex: 1;

					image {
						width: 180rpx;
						height: 180rpx;
					}
				}

				.album_info {
					position: relative;
					flex: 3;
					padding-left: 20rpx;

					.album_info_text {
						width: 100rpx;
						height: 50rpx;
						background-color: #d52a7e;
						color: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
					}

					.album_name {
						padding: 10rpx 0;
						color: #888;
					}

					.iconiconfontjiantou4 {
						font-size: 40rpx;
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						right: 10%;
						color: #333333;
					}
				}
			}
		}
	}

	.comment_hot {
		.comment_title {
			padding: 15rpx;

			.iconfont {
				color: red;
				font-size: 40rpx;
			}

			.comment_text {
				font-weight: 600;
				font-size: 28rpx;
				color: #666;
				margin-left: 10rpx;
			}
		}

		.recommend_list {
			.comment_item {
				border-bottom: solid 15rpx #eee;

				.comment_user {
					display: flex;
					padding: 20rpx 0;

					.user_icon {
						width: 15%;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 90%;
						}
					}

					.user_name {
						flex: 1;

						.user_nickname {
							color: #777;
						}

						.user_time {
							color: #ccc;
							font-size: 24rpx;
							padding: 5rpx;
						}
					}

					.user_badge {
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
				}

				.comment_desc {
					display: flex;
					padding: 30rpx 0;

					.comment_content {
						flex: 1;
						padding-left: 15%;
						color: #000;
					}

					.comment_like {
						text-align: right;
					}
				}

			}
		}
	}

	.comment_new {
		.comment_title {
			padding: 15rpx;

			.iconfont {
				color: red;
				font-size: 40rpx;
			}

			.comment_text {
				font-weight: 600;
				font-size: 28rpx;
				color: #666;
				margin-left: 10rpx;
			}
		}

		.recommend_list {
			.comment_item {
				border-bottom: solid 15rpx #eee;

				.comment_user {
					display: flex;
					padding: 20rpx 0;

					.user_icon {
						width: 15%;
						display: flex;
						justify-content: center;
						align-items: center;

						image {
							width: 90%;
						}
					}

					.user_name {
						flex: 1;

						.user_nickname {
							color: #777;
						}

						.user_time {
							color: #ccc;
							font-size: 24rpx;
							padding: 5rpx;
						}
					}

					.user_badge {
						image {
							width: 40rpx;
							height: 40rpx;
							display: inline-block;
						}
					}
				}

				.comment_desc {
					display: flex;
					padding: 30rpx 0;

					.comment_content {
						flex: 1;
						padding-left: 15%;
						color: #000;
					}

					.comment_like {
						text-align: right;
					}
				}

			}
		}
	}

	.iconhot1 {
		color: aqua !important;
	}

	.download{
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		
		.download_btn{
			width: 90%;
			height: 85%;
			background-color: #d52a7e;
			color: #fff;
			font-size: 50rpx;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>